 var xAxisArray = JSON.parse(sessionStorage.getItem("xAxisArray"))
var fJsArray = JSON.parse(sessionStorage.getItem("fJsArray"))
var jsArray = JSON.parse(sessionStorage.getItem("jsArray"))
var ftArray = JSON.parse(sessionStorage.getItem("ftArray"))
var jfArray = JSON.parse(sessionStorage.getItem("jfArray"))
var fJsNum = 0;
var jsNum = 0;
var ftNum = 0;
var jfNum = 0;

$.each(fJsArray,function (i,val){
    fJsNum += val;
})
$.each(jsArray,function (i,val){
    jsNum += val;
})
$.each(ftArray,function (i,val){
    ftNum += val;
})
$.each(jfArray,function (i,val){
    jfNum += val;
})

//第一个统计模块 ---------------------------------------------------------------------------------------
var dom = document.getElementById('wire');
var myChart = echarts.init(dom, null, {
    renderer: 'canvas',
    useDirtyRect: false
});
var option;
option = {
    title: {
        text: 'Weekly Info'
    },
    tooltip: {
        trigger: 'axis'
    },
    legend: {
        data: ['普通用户', '进思用户', '解封用户', '封停用户']
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    toolbox: {
        feature: {
            saveAsImage: {}
        }
    },
    xAxis: {
        type: 'category',
        boundaryGap: false,
        data: xAxisArray
    },
    yAxis: {
        type: 'value'
    },
    series: [
        {
            name: '普通用户',
            type: 'line',
            stack: 'Total',
            data: fJsArray
        },
        {
            name: '进思用户',
            type: 'line',
            stack: 'Total',
            data: jsArray
        },
        {
            name: '解封用户',
            type: 'line',
            stack: 'Total',
            data: jfArray
        },
        {
            name: '封停用户',
            type: 'line',
            stack: 'Total',
            data:ftArray
        }
    ]
};
if (option && typeof option === 'object') {
    myChart.setOption(option);
}
window.addEventListener('resize', myChart.resize);


//第二个统计模块 -------------------

var chartDom2 = document.getElementById('cake');
var myChart2 = echarts.init(chartDom2);
// var myChart2 = echarts.init(chartDom2, 'dark');
var option2;
option2 = {
    title: {
        text: 'Weekly Info',
        subtext: 'Cookie Data',
        left: 'center'
    },
    tooltip: {
        trigger: 'item'
    },
    legend: {
        orient: 'vertical',
        left: 'left'
    },
    toolbox: {
        feature: {
            saveAsImage: {}
        }
    },
    series: [
        {
            name: 'Week用户统计',
            type: 'pie',
            radius: '50%',
            data: [
                { value: fJsNum , name: '普通用户' },
                { value: jsNum, name: '进思用户' },
                { value: jfNum, name: '解封用户' },
                { value: ftNum, name: '封停用户' }
            ],
            emphasis: {
                itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        }
    ]
};
option2 && myChart2.setOption(option2);


//第三个统计模块 -------------------
var chartDom3 = document.getElementById('column');
var myChart3 = echarts.init(chartDom3);
var option3;
option3 = {
    xAxis: {
        data: ['进思用户', '普通用户', '封停用户','解封用户']
    },
    yAxis: {},
    dataGroupId: '',
    animationDurationUpdate: 500,
    toolbox: {
        feature: {
            saveAsImage: {}
        }
    },
    series: {
        type: 'bar',
        id: 'sales',
        data: [
            {
                value: jsNum,
                groupId: '进思用户',
                itemStyle: {
                    color: '#00C9A7'
                }
            },
            {
                value: fJsNum,
                groupId: '普通用户'
            },
            {
                value: ftNum,
                groupId: '封停用户',
                itemStyle: {
                    color: '#a90000'
                }
            },
            {
                value: jfNum,
                groupId: '解封用户',
                itemStyle: {
                    color: '#FFC75F'
                }
            }
        ],
        universalTransition: {
            enabled: true,
            divideShape: 'clone'
        }
    }
};
const drilldownData = [
    {
        dataGroupId: '进思用户',
        data: [
            [xAxisArray[0],{value: jsArray[0], itemStyle: {color: '#00C9A7'}}],
            [xAxisArray[1],{value: jsArray[1], itemStyle: {color: '#00C9A7'}}],
            [xAxisArray[2],{value: jsArray[2], itemStyle: {color: '#00C9A7'}}],
            [xAxisArray[3],{value: jsArray[3], itemStyle: {color: '#00C9A7'}}],
            [xAxisArray[4],{value: jsArray[4], itemStyle: {color: '#00C9A7'}}],
            [xAxisArray[5],{value: jsArray[5], itemStyle: {color: '#00C9A7'}}],
            [xAxisArray[6],{value: jsArray[6], itemStyle: {color: '#00C9A7'}}]
        ]
    },
    {
        dataGroupId: '普通用户',
        data: [
            [xAxisArray[0],fJsArray[0]],
            [xAxisArray[1],fJsArray[1]],
            [xAxisArray[2],fJsArray[2]],
            [xAxisArray[3],fJsArray[3]],
            [xAxisArray[4],fJsArray[4]],
            [xAxisArray[5],fJsArray[5]],
            [xAxisArray[6],fJsArray[6]]
        ]
    },
    {
        dataGroupId: '封停用户',
        data: [
            [xAxisArray[0],{value: ftArray[0], itemStyle: {color: '#a90000'}}],
            [xAxisArray[1],{value: ftArray[1], itemStyle: {color: '#a90000'}}],
            [xAxisArray[2],{value: ftArray[2], itemStyle: {color: '#a90000'}}],
            [xAxisArray[3],{value: ftArray[3], itemStyle: {color: '#a90000'}}],
            [xAxisArray[4],{value: ftArray[4], itemStyle: {color: '#a90000'}}],
            [xAxisArray[5],{value: ftArray[5], itemStyle: {color: '#a90000'}}],
            [xAxisArray[6],{value: ftArray[6], itemStyle: {color: '#a90000'}}]
        ]
    },
    {
        dataGroupId: '解封用户',
        data: [
            [xAxisArray[0],{value: jfArray[0], itemStyle: {color: '#FFC75F'}}],
            [xAxisArray[1],{value: jfArray[1], itemStyle: {color: '#FFC75F'}}],
            [xAxisArray[2],{value: jfArray[2], itemStyle: {color: '#FFC75F'}}],
            [xAxisArray[3],{value: jfArray[3], itemStyle: {color: '#FFC75F'}}],
            [xAxisArray[4],{value: jfArray[4], itemStyle: {color: '#FFC75F'}}],
            [xAxisArray[5],{value: jfArray[5], itemStyle: {color: '#FFC75F'}}],
            [xAxisArray[6],{value: jfArray[6], itemStyle: {color: '#FFC75F'}}]
        ]
    }
];
myChart3.on('click', function (event) {
    if (event.data) {
        var subData = drilldownData.find(function (data) {
            return data.dataGroupId === event.data.groupId;
        });
        if (!subData) {
            return;
        }
        myChart3.setOption({
            xAxis: {
                data: subData.data.map(function (item) {
                return item[0];
                })
            },
            series: {
                type: 'bar',
                id: 'sales',
                dataGroupId: subData.dataGroupId,
                data: subData.data.map(function (item) {
                    return item[1];
                }),
                universalTransition: {
                    enabled: true,
                    divideShape: 'clone'
                }
            },
            graphic: [
                {
                    type: 'text',
                    left: 50,
                    top: 20,
                    style: {
                        text: '返回',
                        fontSize: 18
                    },
                    onclick: function () {
                        myChart3.setOption(option3);
                    }
                }
            ]
        })
    }
});
option3 && myChart3.setOption(option3);



//进行切换模块 -------------------
var wire = $("#wire")
var cake = $("#cake")
var column =$("#column")
cake.hide();
column.hide();
function changWire(){
    wire.show()
    cake.hide()
    column.hide()
    $(window).trigger('resize');
}
function changCake(){
    cake.show()
    wire.hide()
    column.hide()
    $(window).trigger('resize');
}
function changColumn(){
    column.show()
    cake.hide()
    wire.hide()
    $(window).trigger('resize');
}
